<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <button>250</button>

  <button>2501</button>
  <button>2502</button>
  <button>2503</button>
  <button>2504</button>



  <span class="m1">m1</span>
  <span class="m2">m2</span>
  <span class="m3">m3</span>


  <div class="box"></div>
  <input type="text">

  <script>
    const btns = document.querySelectorAll('button')
    console.log(btns);
    btns.forEach(btn => {
      btn.addEventListener('click', function () {
        this.innerHTML = Math.random() * 100000000000000
        console.log(this);

      })
    })

    const box = document.querySelector('.box')
    box.addEventListener('mouseenter', function () {
      this.style.backgroundColor = 'green'
      console.log('移入');
    })
    box.addEventListener('mouseleave', function () {
      this.style.backgroundColor = 'red'
      console.log('移出');
    })
    const input = document.querySelector('input')
    input.addEventListener('focus', function () {
      this.style.backgroundColor = 'gold'
      console.log('聚焦');
    })
    input.addEventListener('blur', function () {

      console.log('失焦');
    })
    input.addEventListener('keydown', function (e) {
      // console.log(e.key);
    })
    input.addEventListener('keyup', function (e) {
      // console.log(e.key);
      if (e.key === 'Enter') {
        console.log('回车');
        this.innerText = '哈哈哈'
      }
    })








  </script>
  <script src="./scripts/main.js">
  </script>
</body>

</html>